Redesign longblog.html as developer-focused portfolio - #2

Transforms longblog.html from basic portfolio page into a comprehensive developer portfolio with secure contact handling, CV distribution, and social integration.

Core Changes

New Sections

• About Me (#about) - Professional background and expertise
• CV Download (#cv) - Links to assets/Adamu_Danjuma_CV.pdf (requires file upload)
• Enhanced Contact (#contact) - Formspree integration replaces insecure mailto

Contact Form Security

• Formspree endpoint handles submissions server-side
• AJAX submission via Fetch API with real-time feedback
• Email address never exposed in frontend
• Form endpoint xovqqwdz is placeholder - requires user's Formspree account

<!-- Before: insecure mailto -->
<form action="mailto:your-email@example.com" method="POST">

<!-- After: secure Formspree with AJAX -->
<form id="contact-form" action="https://formspree.io/f/xovqqwdz" method="POST">

// AJAX submission with state management
form.addEventListener('submit', function(e) {
  e.preventDefault();
  fetch(form.action, { method: 'POST', body: new FormData(form) })
    .then(/* success feedback */)
    .catch(/* error handling */);
});

Social Media Footer

• GitHub, LinkedIn, Twitter with SVG icons
• Security attributes: rel="noopener noreferrer", target="_blank"

Design Updates

• CSS custom properties for theme configuration (lines 9-17)
• Responsive breakpoint at 700px for mobile
• Sticky header navigation
• Flexbox + Grid layouts

Configuration Required

Users must customize three areas (marked with inline comments):

1. Line 435: Replace Formspree endpoint with personal account
2. Line 418: Add CV PDF to assets directory
3. Lines 460-477: Update social media URLs

See PORTFOLIO_SETUP.md for detailed setup instructions.

This pull request was created as a result of the following prompt from Copilot chat.

Redesign the longblog.html file to create a developer-focused portfolio. Ensure the following updates are made:\n\n1. New Sections:\n - Create an "About Me" section to highlight personal and professional background.\n - Add a "Contact Me" section with a functional form to directly send emails to adab-tech's personal email when visitors submit the form.\n - Include a "My CV" section that allows visitors to download a PDF of the CV.\n - Add social media links/icons (GitHub, LinkedIn, Twitter) in a visually appealing footer.\n\n2. Design and User Experience:\n - Implement a modern and professional design suitable for a developer portfolio.\n - Use clear typography, high contrast, and responsive design principles.\n - Optimize for both desktop and mobile devices.\n\n3. Contact Form Logic:\n - Implement the contact form using an email service (e.g., Formspree, EmailJS, or a server-side solution) to send messages directly to the user's personal email.\n - Secure the implementation to avoid exposing the email address in the frontend.\n\n4. Code Quality:\n - Use well-commented, modular HTML and CSS code.\n - Ensure compatibility with major browsers.\n\nVersion control note:\nThis update will be committed to the redesign-portfolio branch for eventual review.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.